<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>粉丝性别分布</span>
      <span class="rightsex">
        <span class="m">
          <i class="iconm"></i>
          <span>男(50%)</span>
        </span>
        <span class="n">
          <i class="iconn"></i>
          <span>女(50%)</span>
        </span>
      </span>
      <el-progress :text-inside="true" :stroke-width="26" :percentage="50"></el-progress>
    </div>
    <el-row>
      <el-col :span="16" class="hexl">
        <div class="grid-content bg-purple hexl-in" ref="hxtl"></div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light hexl">
          <el-table :data="tableData2">
            <el-table-column prop="date" label="年龄" width="240px"></el-table-column>
            <el-table-column prop="name" label="粉丝占比"></el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <!-- 粉丝终端分布统计 -->
    <el-row class="fansbottom">
      <el-col :span="24">
        <span>粉丝终端分布</span>
        <span class="rightsex">
          <span class="m">
            <i class="iconm"></i>
            <span>Android(35%)</span>
          </span>
          <span class="n">
            <i class="iconn"></i>
            <span>IOS（65%）</span>
          </span>
        </span>
        <el-progress :text-inside="true" :stroke-width="26" :percentage="35"></el-progress>
        <span class="like">你的受众喜欢那些分类的内容</span>
      </el-col>
      <div class="fanslike" ref="fanslike"></div>
    </el-row>
  </el-card>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      tableData2: [
        {
          date: "2016-05-02",
          name: "王小虎"
        },
        {
          date: "2016-05-04",
          name: "王小虎"
        },
        {
          date: "2016-05-01",
          name: "王小虎"
        },
        {
          date: "2016-05-03",
          name: "王小虎"
        },
        {
          date: "2016-05-03",
          name: "王小虎"
        },
        {
          date: "2016-05-03",
          name: "王小虎"
        },
        {
          date: "2016-05-03",
          name: "王小虎"
        }
      ]
    };
  },
  mounted() {
    var hxtlclass = this.$refs.hxtl;
    var fanslikeclass = this.$refs.fanslike;
    let option = {
      color: ["#3398DB"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: "value"
        }
      ],
      series: [
        {
          name: "直接访问",
          type: "bar",
          barWidth: "60%",
          data: [10, 52, 200, 334, 390, 330, 220]
        }
      ]
    };
    hxtlclass.style.width = "600px";
    let hxtlChart = echarts.init(hxtlclass);
    hxtlChart.setOption(option);

    fanslikeclass.style.width = "1100px";
    let fanslikeChart = echarts.init(fanslikeclass);
    fanslikeChart.setOption(option);
  }
};
</script>

<style lang="less" scoped>
.rightsex {
  float: right;
  .iconm {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background-color: #69b4ff;
    margin: 0px 10px;
  }
  .iconn {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background-color: #ebeef5;
    margin: 0px 10px;
  }
}
.el-progress {
  margin-top: 20px;
}
.hexl {
  height: 350px !important;
  width: 730px;
  .hexl-in {
    height: 350px !important;
    width: 100%;
    div {
      width: 690px !important;
    }
    canvas {
      width: 650px !important;
    }
  }
}
.fansbottom {
  margin: 80px 0px 20px 0px;
  .like {
    display: block;
    margin-top: 20px;
  }
  .fanslike {
    height: 400px !important;
    width: 100%;
    margin-bottom: 100px;
  }
}
</style>